<template>
    <div class="page">
        <div class="bg-color-box">
            <!--顶部导航栏-->
            <van-nav-bar class="nav-bar-box" :left-arrow="true" @click-left="onClickLeft">
                <div slot="left">
                    <i class="go-back-icon"></i>
                    <span class="title">物业</span>
                </div>
            </van-nav-bar>

            <!--个人信息-->
            <div class="personal-info">
                <div class="myHeadImg" @click="clickHead()" ref="headImg">
                    <img src="../assets/images/head-portrait.png" alt="头像"/>
                </div>

                <div class="info">
                    <div>
                        <span class="name">{{$Cookies.get('personName')}}</span>
                        <span class="certified">已认证</span>
                    </div>

                    <div class="village">
                        <span>{{$Cookies.get('communityName')&&$Cookies.get('communityName')!='null' ? $Cookies.get('communityName') : '暂无小区'}}</span>
                    </div>
                </div>

                <img class="img-scan" src="../assets/images/img-scan.png" alt="扫一扫" @click="clickScan()"/>
            </div>
        </div>

        <!--菜单-->
        <div class="menu">
            <van-button @click="clickFamily()">住户管理</van-button>
            <van-button @click="clickHistory()">出入历史</van-button>
            <van-button @click="clickStaff()">员工管理</van-button>
        </div>

        <!--统计信息-->
        <div class="census-info" v-if="false">
            <span class="title">统计信息</span>

            <span class="date" @click="clickData()">
                <span class="span">{{$utils.date(currentDate)}}</span>
                <i class="date-icon"></i>
            </span>

            <van-dropdown-menu class="dropdown-menu" :close-on-click-outside="false">
                <van-dropdown-item ref="item" title="筛选">
                    <div class="choice-time">
                        <span class="time-box" @click="choiceTime('start')">{{startTime}}</span> -
                        <span class="time-box" @click="choiceTime('end')">{{endTime}}</span>
                        <van-button type="primary" size="small" @click="search()">确定</van-button>
                    </div>
                </van-dropdown-item>
            </van-dropdown-menu>
        </div>

        <!--信息列表-->
        <div class="info-list" v-if="false">
            <div class="item-box">
                <i class="icon out-icon"></i>
                <span class="title">出小区人数</span>
                <span class="number">5647</span>
            </div>

            <div class="item-box">
                <i class="icon in-icon"></i>
                <span class="title">入小区人数</span>
                <span class="number">698</span>
            </div>

            <div class="item-box">
                <i class="icon visit-icon"></i>
                <span class="title">外来人员数</span>
                <span class="number">268</span>
            </div>

            <div class="item-box">
                <i class="icon temp-icon"></i>
                <span class="title">体温异常数</span>
                <span class="number red-text">0</span>
            </div>
        </div>

        <!--日期上拉弹框-->
        <van-action-sheet v-model="showDateBox" title="选择日期">
            <van-datetime-picker type="date" :min-date="minDate" :max-date="maxDate"
                                 @confirm="dateConfirm" @cancel="dateCancel"/>
        </van-action-sheet>

        <!--时间上拉弹框-->
        <van-action-sheet v-model="showTimeBox" title="选择时间">
            <van-datetime-picker type="time" @confirm="timeConfirm" @cancel="timeCancel"/>
        </van-action-sheet>

    </div>
</template>

<script>
    import {NavBar,Button,ActionSheet,DatetimePicker,DropdownMenu,DropdownItem, Dialog, Toast} from 'vant';
	import wx from 'weixin-js-sdk'

    export default {
        name: 'propertyManage',

        components: {
            [NavBar.name]: NavBar,
			[Button.name]: Button,
			[ActionSheet.name]: ActionSheet,
			[DatetimePicker.name]: DatetimePicker,
			[DropdownMenu.name]: DropdownMenu,
			[DropdownItem.name]: DropdownItem,
			[Dialog.name]: Dialog,
			[Toast.name]: Toast,
        },

        props: {},

        data() {
            return {
            	wxDate: {},

				minDate: new Date(2019, 0, 1),
				maxDate: new Date(2030, 11, 31),
				currentDate: new Date(),
				showDateBox: false,
				startTime: '',
                endTime: '',
				timeType: '',
				showTimeBox: false,
            }
        },

        mounted() {
			this.getHeadImg();
        },

        methods: {
			//点击返回
			onClickLeft(){
				this.$router.go(-1);
			},

			//点击扫一扫-获取签名
			clickScan(){
				this.$axios.post(this.$api.getWxSignature, {
					url: window.location.href.split('#')[0],

				}).then(success => {
//					Dialog({
//						title: JSON.stringify(success.data),
//						message: window.location.href.split('#')[0],
//					});

					if(success.data.code == '200'){
						this.wxDate = success.data.data;
						this.wxScan();
                    }

				}).catch(error => {

				})
			},

            //调用微信扫一扫
            wxScan(){
				let that = this;

				wx.config({
					debug: false,
					appId: this.wxDate.appId,        // 必填,公众号的唯一标识
					timestamp: this.wxDate.timestamp, // 必填,生成签名的时间戳
					nonceStr: this.wxDate.noncestr, // 必填,生成签名的随机串
					signature: this.wxDate.signature, // 必填,签名
					jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表
				});

				wx.ready(function () {
					// 判断当前客户端版本是否支持指定JS接口
                    wx.checkJsApi({
                        jsApiList: [
                            'scanQRCode'
                        ],
                        success: function (res) {
                        	// 以键值对的形式返回，可用true，不可用false
                            if (res.checkResult.scanQRCode === true) {
                                wx.scanQRCode({
                                    desc: 'scanQRCode desc',
                                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                                    scanType: ['qrCode', 'barCode'],  // 可以指定扫二维码还是一维码，默认二者都有
                                    success: function (res) {
										let getCode = decodeURI(res.resultStr);  //扫码返回的结果
										that.$Cookies.set('personCodeData', getCode);
                                        that.$router.push('/scan');

                                    }
                                })
                            } else {
                                alert('抱歉，当前客户端版本不支持扫一扫')
                            }
                        },
                        fail: function (res) { // 检测getNetworkType该功能失败时处理
                            alert('fail' + res)
                        }
                    })
				});

				/* 处理失败验证 */
				wx.error(function (res) {
                    alert('配置验证失败: ' + res.errMsg)
				})
            },



			//获取头像
			getHeadImg(){
				if(this.$Cookies.get('headImgUrl')){
					this.$refs.headImg.innerHTML=`<img src="${this.$Cookies.get('headImgUrl')}" alt="头像"/>`
				}
			},

			//点击头像
			clickHead(){
				this.$router.push('/personalInfo');
			},

            //点击住户管理
			clickFamily(){
				Toast('暂未开放');
				return;

				this.$router.push('/familyManage');
            },
            //点击出入历史
			clickHistory(){
				this.$router.push('/outInHistory');
            },
			//点击员工管理
			clickStaff(){
				this.$router.push('/staffManage');
			},

			//点击选择日期
			clickData(){
				this.showDateBox = true;
			},
			dateConfirm(date){
				this.showDateBox = false;
				this.currentDate = date;
			},
			dateCancel(){
				this.showDateBox = false;
			},

			//选择开始/结束时间
			choiceTime(type){
				this.timeType = type;
				this.showTimeBox = true;
            },
			timeConfirm(time){
				this.showTimeBox = false;
				if(this.timeType == 'start'){
					this.startTime = time;
                }else{
					this.endTime = time;
                }
			},
			timeCancel(){
				this.showTimeBox = false;
			},
            //点击确定筛选
			search(){
				this.$refs.item.toggle();
            }
        },
    }
</script>

<style lang="scss" scoped>
    .page{
        background-color: white;
    }


    /*个人信息*/
    .personal-info{
        padding: 30px;

        .info{
            display: inline-block;
            vertical-align: top;
            margin-left: 10px;
            margin-top: 2px;

            .name{
                font-size: 20px;
                font-weight: bold;
                color: white;
                vertical-align: middle;
            }
            .certified{
                border: solid 1px #f5fb1a;
                color: #f5fb1a;
                font-size: 12px;
                padding: 2px 6px;
                border-radius: 4px;
                vertical-align: middle;
                margin-left: 4px;
            }
            .village{
                font-size: 15px;
                color: white;
                margin-top: 6px;
            }
        }
        .img-scan{
            width: 30px;
            height: 30px;
            float: right;
            margin-top: 10px;
        }
    }

    /*菜单按钮*/
    .menu{
        text-align: center;
        padding: 16px 0;
        background-color: white;

        .van-button--default {
            background: linear-gradient(to bottom right, #61dda3, #07b6d5);
            border-radius: 50px;
            margin: 0 6px;
        }
        .van-button__text{
            font-size: 16px;
            font-weight: bold;
            color: white;
            padding: 0 4px;
        }
    }

    /*统计信息样式*/
    .census-info{
        text-align: center;
        background-color: white;
        margin-top: 12px;
        height: 50px;
        line-height: 50px;

        .title{
            width: 80px;
            float: left;
            margin-left: 20px;
            font-size: 20px;
            font-weight: bold;
            color: #222222;
        }

        .span{
            font-size: 16px;
            color: #222222;
            vertical-align: middle;
        }

        .date{

            .date-icon{
                display: inline-block;
                width: 16px;
                height: 16px;
                background: url("../assets/images/date-icon.png") no-repeat;
                background-size: cover;
                vertical-align: middle;
            }
        }

        /*时间筛选*/
        .dropdown-menu{
            float: right;
            margin-right: 20px;
        }
        /*选择时分样式*/
        .choice-time{
            background-color: white;
            padding: 10px 0;

            .time-box{
                display: inline-block;
                width: 80px;
                height: 30px;
                line-height: 30px;
                border: solid 1px #ededed;
                border-radius: 4px;
                font-size: 16px;
                color: #999999;
                margin: 0 10px;
                vertical-align: middle;
            }
        }
    }

    /*信息列表样式*/
    .info-list{
        background-color: white;
        border-top: solid 1px #f6f6f6;
        padding: 0 20px;

        .item-box{
            padding: 20px 0;
            border-bottom: solid 1px #d9d9d9;
            font-size: 16px;
            color: #222222;

            &:last-child{
                border: none;
            }

            .icon{
                display: inline-block;
                width: 16px;
                height: 16px;
                float: left;

                &.out-icon{
                    background: url("../assets/images/out-icon.png") no-repeat;
                    background-size: cover;
                }
                &.in-icon{
                    background: url("../assets/images/in-icon.png") no-repeat;
                    background-size: cover;
                }
                &.visit-icon{
                    background: url("../assets/images/visit-icon.png") no-repeat;
                    background-size: cover;
                }
                &.temp-icon{
                    background: url("../assets/images/temp-icon.png") no-repeat;
                    background-size: cover;
                }
            }

            .title{
                margin-left: 10px;
                vertical-align: top;
            }

            .number{
                float: right;
                font-weight: bold;

                &.red-text{
                    color: #e90b0b;
                }
            }
        }

    }
</style>

